<template>
	<view class="content">
		<image src="@/static/image/login-bg.jpg" mode="widthFix" class="bg"></image>
		<view class="register">
			<view class="formItem">
				<view class="lab"><text>*</text>手机号</view>
				<input class="uni-input" v-model.trim="form.mobile" placeholder="请输入您的手机号" placeholder-style="color:#ccc"/>
			</view>
			<view class="formItem">
				<view class="lab"><text>*</text>昵称</view>
				<input class="uni-input" v-model.trim="form.nickname" placeholder="请输入您的昵称" placeholder-style="color:#ccc"/>
			</view>
			<view class="formItem">
				<view class="lab"><text>*</text>密码</view>
				<input class="uni-input" v-model.trim="form.password" placeholder="请输入至少6位密码" 
					:password="hidePwd" placeholder-style="color:#ccc" />
				<uni-icons type="eye-slash" size="26" class="eye" color="#999999"v-if="hidePwd" @click="hidePwd=false"></uni-icons>
				<uni-icons type="eye" size="26" class="eye" color="#999999"v-else @click="hidePwd=true"></uni-icons>
			</view>
			<view class="formItem">
				<view class="lab"><text>*</text>确认密码</view>
				<input class="uni-input" v-model.trim="form.re_password" placeholder="请确认您的密码" 
					:password="hideRePwd" placeholder-style="color:#ccc" />
				<uni-icons type="eye-slash" size="26" class="eye" color="#999999"v-if="hideRePwd" @click="hideRePwd=false"></uni-icons>
				<uni-icons type="eye" size="26" class="eye" color="#999999"v-else @click="hideRePwd=true"></uni-icons>
			</view>
			<view class="formItem">
				<view class="lab"><text>*</text>推荐人手机号</view>
				<input class="uni-input" v-model.trim="form.account" placeholder="请输入您的推荐人手机号" placeholder-style="color:#ccc"/>
			</view>
			<view class="read">
				<checkbox-group @change="changeChecked">
					<label>
						<checkbox :checked="isChecked" value="1" color="#4EB0FF" style="transform:scale(0.7);position: relative;top: -3rpx;" />
						已阅读并同意
					</label>
				</checkbox-group>
				<text @click="seeAgreement('register')">《注册协议》</text>
				<text @click="seeAgreement('privacy')">《隐私政策》</text>
			</view>
		</view>
		<button class="primary" @tap="submitLogin()">立即注册</button>
		<view class="read" @click="routerLogin">返回登录</view>
	</view>
</template>

<script>
	import common from '@/static/js/common.js';
	
	export default {
		data() {
			return {
				isChecked: false,
				hidePwd: true,
				hideRePwd: true,
				form: {
					mobile: '',
					nickname: '',
					password: '',
					re_password: '',
					account: ''
				},
				rules: [
					{name: 'mobile', rule: 'empty', msg: '手机号不能为空'},
					{name: 'mobile', rule: 'mobile', msg: '手机号格式错误'},
					{name: 'nickname', rule: 'empty', msg: '昵称不能为空'},
					{name: 'password', rule: 'empty', msg: '密码不能为空'},
					{name: 're_password', rule: 'empty', msg: '确认密码不能为空'},
					{name: 'account', rule: 'empty', msg: '推荐人手机号不能为空'},
					{name: 'account', rule: 'mobile', msg: '推荐人手机号格式错误'},
				],
			}
		},
		onLoad(e) {
			if (e.account && e.account != '') {
				this.form.account = e.account
			}
			
		},
		methods: {
			changeChecked(e) {
				if (e.detail.value.length > 0) {
					this.isChecked = true
				} else {
					this.isChecked = false
				}
			},
			routerLogin() {
				uni.reLaunch({url:'/pages/login/index'})
			},
			submitLogin() {
				let that = this;
				let valid = common.validator(that.rules, that.form)
				if (!valid.validator) { uni.showToast({ title: valid.msg, icon: 'none' });return false;}
				if (that.form.password != that.form.re_password) {
					uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
					return false;
				}
				if (!that.isChecked) {
					uni.showToast({ title: '请先阅读并勾选协议', icon: 'none' });/* 《家朕邦用户协议》 */
					return false
				}
				common.api({
					method: 'POST',
					url: '/mobile/user/register',
					data: {
						mobile: that.form.mobile,
						nickname: that.form.nickname,
						password: that.form.password,
						re_password: that.form.re_password,
						account: that.form.account,
					},
					success: function(res) {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						uni.showToast({ title: '注册成功并登录', icon: 'success' });
						uni.setStorageSync('token', res.data.token);
						uni.reLaunch({url:'/pages/index/index'})
					},
					error: function () {
						uni.showToast({ title: '数据请求异常', icon: 'none' });
					}
				});
			},
			seeAgreement(type) {
				uni.navigateTo({url:'/pages/other/agreement?type='+type})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		position: relative;
		.bg {
			display: block;
			width: 100vw;
		}
		.register {
			background-color: #fff;
			padding: 0 20rpx 20rpx;
			.formItem {
				.eye {
					margin-left: 10rpx;
					flex-shrink: 0;
				}
			}
		}
		.read {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #999;
			text {
				color: #000;
				position: relative;
				top: -2rpx;
			}
		}
		.primary {
			width: 80vw;
			margin: 60rpx auto 40rpx;
		}
	}
</style>
